<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost - 搜索引擎</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4f46e5;
            --secondary-color: #10b981;
            --text-color: #1f2937;
            --bg-color: #f9fafb;
            --card-bg: #ffffff;
            --border-color: #e5e7eb;
            --shadow-color: rgba(0, 0, 0, 0.08);
            --input-bg: #ffffff;
            --placeholder-color: #9ca3af;
            --success-color: #10b981;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 新增的Boost Search居中样式 */
        .brand-logo {
            text-align: center;
            margin-bottom: 2rem;
        }

        .brand-logo h1 {
            font-family: 'Inter', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #4f46e5, #6d28d9);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .brand-slogan {
            font-size: 1rem;
            color: #6b7280;
        }

        .search-container {
            margin-bottom: 2rem;
        }

        .search-box {
            display: flex;
            box-shadow: 0 4px 12px var(--shadow-color);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .search-box:focus-within {
            box-shadow: 0 6px 16px rgba(79, 70, 229, 0.15);
            transform: translateY(-2px);
        }

        .search-input {
            flex: 1;
            padding: 1rem 1.5rem;
            font-size: 1rem;
            border: none;
            background-color: var(--input-bg);
            color: var(--text-color);
            outline: none;
            font-weight: 500;
        }

        .search-input::placeholder {
            color: var(--placeholder-color);
            font-weight: 400;
        }

        .search-button {
            padding: 0 2rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .search-button:hover {
            background-color: #4338ca;
        }

        .results-container {
            display: none;
        }

        .result-item {
            background-color: var(--card-bg);
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 8px var(--shadow-color);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .result-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px var(--shadow-color);
        }

        .result-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }

        .result-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .result-title a:hover {
            color: #4338ca;
            text-decoration: underline;
        }

        .result-description {
            color: var(--text-color);
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }

        .result-url {
            display: block;
            color: var(--success-color);
            font-size: 0.875rem;
            font-family: monospace;
            word-break: break-all;
        }

        .loading-indicator {
            display: none;
            text-align: center;
            padding: 2rem;
        }

        .spinner {
            width: 3rem;
            height: 3rem;
            border: 4px solid rgba(79, 70, 229, 0.1);
            border-left-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--placeholder-color);
        }

        .search-meta {
            font-size: 0.875rem;
            color: var(--placeholder-color);
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
        }

        @media (max-width: 640px) {
            .search-box {
                flex-direction: column;
            }
            
            .search-input {
                padding: 1rem;
            }
            
            .search-button {
                padding: 0.75rem;
                width: 100%;
            }
            
            body {
                padding: 1rem 0.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 新增的品牌区域 -->
        <div class="brand-logo">
            <h1>Boost Search</h1>
            <p class="brand-slogan">智能高效的搜索引擎</p>
        </div>

        <div class="search-container">
            <div class="search-box">
                <input type="text" class="search-input" placeholder="输入搜索关键词..." autocomplete="off" autofocus>
                <button class="search-button" onclick="Search()">搜索</button>
            </div>
        </div>

        <div class="loading-indicator" id="loadingIndicator">
            <div class="spinner"></div>
            <p>正在搜索中，请稍候...</p>
        </div>

        <div class="results-container" id="resultsContainer">
            <div class="search-meta" id="searchMeta">
                <span id="resultCount">0 个结果</span>
                <span id="searchTime">0.00 秒</span>
            </div>
            <div class="results-list" id="resultsList">
                <!-- 结果将在这里动态插入 -->
            </div>
        </div>

        <div class="empty-state" id="emptyState">
            <h3>欢迎使用 Boost 搜索引擎</h3>
            <p>输入关键词开始搜索</p>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化空状态显示
            $('#emptyState').show();
            $('#resultsContainer').hide();
            $('#loadingIndicator').hide();

            // 输入框获取焦点时清空默认文本
            $('.search-input').on('focus', function() {
                if ($(this).val() === '请输入搜索关键字') {
                    $(this).val('');
                }
            });

            // 按回车键触发搜索
            $('.search-input').on('keypress', function(e) {
                if (e.which === 13) {
                    Search();
                }
            });
        });

        function Search() {
            const query = $('.search-input').val().trim();
            
            if (query === '') {
                alert('请输入搜索关键词');
                return;
            }

            // 显示加载指示器
            $('#loadingIndicator').show();
            $('#emptyState').hide();
            $('#resultsContainer').hide();

            // 记录开始时间
            const startTime = performance.now();

            // 发起AJAX请求
            $.ajax({
                type: "GET",
                url: "/s?word=" + encodeURIComponent(query),
                success: function(data) {
                    // 计算耗时
                    const endTime = performance.now();
                    const searchDuration = ((endTime - startTime) / 1000).toFixed(2);
                    
                    // 更新搜索元信息
                    $('#searchTime').text(`${searchDuration} 秒`);
                    $('#resultCount').text(`${data.length} 个结果`);
                    
                    // 构建结果
                    BuildHtml(data);
                    
                    // 隐藏加载指示器，显示结果
                    $('#loadingIndicator').hide();
                    $('#resultsContainer').fadeIn(300);
                    $('#emptyState').hide();
                },
                error: function() {
                    $('#loadingIndicator').hide();
                    $('#emptyState').html('<h3>搜索失败</h3><p>请检查网络连接后重试</p>').show();
                }
            });
        }

        function BuildHtml(data) {
            const resultsList = $('#resultsList');
            resultsList.empty();

            if (!data || data.length === 0) {
                $('#emptyState').html('<h3>没有找到结果</h3><p>尝试使用不同的关键词</p>').show();
                return;
            }

            data.forEach((item, index) => {
                const resultItem = $(`
                    <div class="result-item" style="animation-delay: ${index * 0.05}s">
                        <h3 class="result-title">
                            <a href="${item.url}" target="_blank">${item.title}</a>
                        </h3>
                        <p class="result-description">${item.desc}</p>
                        <span class="result-url">${item.url}</span>
                    </div>
                `).hide().fadeIn(300);
                
                resultsList.append(resultItem);
            });
        }
    </script>
</body>
</html>